<template>
  <div>
    <!-- 
      $nextTick 是干什么用的呢？

     -->
    <p ref="a">数字：{{ count }}</p>
    <button @click="btn">点击+1，观察打印</button>
  </div>
</template>

<script>
export default {
  data(){
    return {
      count: 0
    }
  },
  methods: {
    btn(){
      // 修改数字
      this.count++;
      // 获取标签上的数字是否为最新的？答：获取到的是旧的// 总结：说明DOM更新是异步的
      // console.log(this.$refs.a.innerHTML); // 0
      // 需求：我需要在修改数字后，立刻获取标签中最新的内容，如何实现？
      // 答：vue专门提供了一个方法给我们使用$nextTick，我们可以在这个方法的回调函数中
      // 获取到更新后的DOM内容
      // $nextTick语法：this.$nextTick(function(){ 这个回调函数是Dom更新后执行 })
      this.$nextTick(()=>{
        console.log(this.$refs.a.innerHTML); // 1
      })
    }
  }
}
</script>

<style>

</style>